<template>
	<div class="processManagement">
		<!-- 添加 -->
		<el-card class="box-card" shadow="never">
			<el-row>
				<el-button v-no-more-click:3000 type="primary" class="add-invoice" @click="showDialog">添加</el-button>
				<!-- <el-button type="info" class="add-invoice" @click="exportAll">导出</el-button> -->
			</el-row>
		</el-card>
		<el-table id="IMTable"
			:data="tableData"
			border
			style="width: 100%"
			:default-sort="{prop: 'id', order: 'ascending'}"
		 	v-loading="loading"
			height="83%"
			tooltip-effect="dark"
			@selection-change="handleSelectionChange">
			<!-- <el-table-column show-overflow-tooltip type="selection" width="55"></el-table-column> -->
			<el-table-column show-overflow-tooltip prop="id" label="ID" width="60" align="left">
				<template slot-scope="scope">{{(scope.$index+1)+(currentPage-1)*tableSize}}</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip prop="display_name" label="角色名" align="left" sortable></el-table-column>
			<el-table-column show-overflow-tooltip prop="created_at" label="注册时间" align="left" sortable></el-table-column>
			<el-table-column show-overflow-tooltip prop="updated_at" label="更新时间" align="left" sortable></el-table-column>
			<el-table-column show-overflow-tooltip label="操作" align="center">
				<template slot-scope="scope">
					<el-button v-no-more-click:3000 type="primary" size="small" @click="editRole(scope.row)">编辑</el-button>
					<el-button v-no-more-click:3000 type="danger" size="small" @click="delRole(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>



		<!-- 分页 -->
		<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		 :page-sizes="pageSizes" :page-size="Number(pageSize)" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>


		<!-- 添加角色 -->
		<roleDialog :isEDit="isEDit" ref="roleDialog" @changeList="onChangeList"></roleDialog>
	</div>
</template>
<script>
	import {
		getRoleList,
		delRole
	} from "~/api/user";
	import roleDialog from "~/components/roleDialog";
	export default {
		head: {
			title: "角色管理"
		},
		name: "role",
		data() {
			return {
				total: 0,
				loading: false,
				tableData: [],
				checkTable: [],
				tableSize: 10, //一页几条
				currentPage: 1, //目前在第几页
				pageSizes: [25, 50], //一页可以几条
				isEDit: false,
				paramsRole: {

				}
			};
		},
		components: {
			roleDialog
		},
		async asyncData({
			$axios
		}) {
			let res = await getRoleList($axios);
			let obj = {
				loading: false
			};
			if (res.data.code == 200) {
				obj.total = res.data.page.total;
				obj.tableData = res.data.data;
				obj.pageSize = res.data.page.per_page;
				obj.tableSize = res.data.page.per_page;
				obj.tableEnd = res.data.page.per_page;
			}
			return obj;
		},
		methods: {
			//编辑
			editRole(val) {
				this.isEDit = true;
				this.$refs.roleDialog.showDialog(val.id);
			},
			// 删除
			delRole(val) {
				this.$confirm("是否删除该角色?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						center: true,
						type: "warning"
					})
					.then(res => {
						delRole(this.$axios, val.id)
							.then(res => {
								if (res.data.code == 200) {
									this.$message({
										type: "success",
										message: "删除成功"
									});
									this.onChangeList();
								} else {
									this.$message({
										type: "error",
										message: res.data.status
									});
								}
							})
							.catch(err => {
								this.$message({
									type: "info",
									message: err
								});
							});
					})
					.catch(err => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			},

			//刷新数据
			onChangeList() {
				this.changeData();
			},
			//获取新数据
			changeData() {
				getRoleList(this.$axios)
					.then(res => {
						this.tableData.splice(0, this.tableData.length, ...res.data.data);
						this.pageSize = res.data.page.per_page;
						this.tableSize = res.data.page.per_page;
						this.tableEnd = res.data.page.per_page;
					})
			},
			// 多选
			handleSelectionChange(val) {
				this.checkTable = val;
			},
			//批量导出
			exportAll() {},

			showDialog() {
				this.isEDit = false;
				this.$refs.roleDialog.showDialog();
			},

			//选择一页几条
			handleSizeChange(size) {
				this.paramsRole.perPage = size
				this.paramsRole.page = 1
      	getRoleList(this.$axios, this.paramsRole)
      	.then(res => {
					if (res.data.code == 200) {
						this.tableData = res.data.data;
						this.total = res.data.page.total
						this.pageSize = res.data.page.per_page
						this.tableSize = res.data.page.per_page
						this.tableEnd = res.data.page.per_page
					}
				})
			},
			//选择第几页
			handleCurrentChange(currentPage) {
				this.currentPage=currentPage;
				getRoleList(this.$axios, {
						page: currentPage
					})
					.then(res => {
						this.tableData.splice(0, this.tableData.length, ...res.data.data);
						this.pageSize = res.data.page.per_page;
						this.tableSize = res.data.page.per_page;
						this.tableEnd = res.data.page.per_page;
					})
			}
		}
	};
</script>

<style lang='less'>
	.el-card {
		margin-bottom: 10px;
	}
	.processManagement {
    height: 100%; //撑满表格
    .el-table {
      width: 99.9% !important;
    }
  }
</style>
